import React, { Component } from 'react'
import { Table, Input, Icon, Button, Popconfirm, Badge, ButtonGroup } from 'antd';






export class EditableCell extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
      editable: false,
    }
  }

  handleChange = (e) => {
    const value = e.target.value;
    this.setState({ value: parseInt(value) });
  }
  check = () => {
    this.setState({ editable: false });
    if (this.props.handUpdate) {
      this.props.handUpdate(this.props.record, this.state.value);
    }
  }
  edit = () => {
    this.setState({ editable: true ,value: this.props.value});
  }
  render() {
    const { value, editable } = this.state;
    // console.log(value)
    return (<div className="editable-cell">
      {
        editable ?
        <div className="editable-cell-input-wrapper">
          <Input
            value={value}
            onChange={this.handleChange}
            onPressEnter={this.check}
          />
          <Icon
            type="check"
            className="editable-cell-icon-check"
            onClick={this.check}
          />
        </div>
        :
        <div className="editable-cell-text-wrapper">
         <span className="cellItem_upcount">{this.props.value}</span>
        
          <Icon
            type="edit"
            className="editable-cell-icon"
            onClick={this.edit}
          />
        </div>
      }
    </div>);
  }
}


export default EditableCell
